<template>
<div class="box">
	<div class="icons">
		<swiper :options="swiperOption"  ref="mySwiper" >
    	<swiper-slide v-for="(pages, index) in page" :key="index">
				<div class="iconBox"  v-for="item in pages" :key="item.id">
					<div class="imgBox">
						<img :src="item.imgUrl" alt="" class="iconPic">
					</div>
					<p class="iconText">{{item.desc}}</p>
				</div>
		</swiper-slide> 
		<div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
	</div>
</div>
</template>
<script>
export default {
	name: 'homeIcon',
	data () {
		return {
			swiperOption: {// 轮播图属性设置
				autoplay: false,
				pagination : '.swiper-pagination',
			}
		}
	},
	props: {
		iconList: Array,
	},
	computed: {
		page () {
			const page = []
			this.iconList.forEach((item, index) => {
				const pages = Math.floor(index/8)//判断每一项应属于第几页
				if (!page[pages]) {
					page[pages] = []//把一维数组二维化，存储每一页应该展示的内容
				}
				page[pages].push(item)//把每一项数据存入应该属于的页码内
			})
			return page
		}
	},
}
</script>
<style scoped>
    .box {
        margin-top: .2rem
    }
	/*整体图标区域*/
	.icons >>> .swiper-container {
		overflow: hidden;
		width: 100%;
		height: 0;
		padding-bottom: 55%;
	}
	/*每一小块的区域*/
	.iconBox {
		width: 25%;
		height: 0;/* 用于解决溢出隐藏问题*/
		overflow: hidden;
		padding-bottom: 25%;/*该属性是相对于父盒子的宽度来计算的*/
		float: left;/* 使用v-for循环展示，只有通过浮动才能控制排列*/
		position: relative;
	}
	/*每一块中的图片盒子*/
	.imgBox {
		position: absolute;/*方便控制位置，并为底面文字留出空间*/
		top: 0;
		left: 0;
		right: 0;
		bottom: .44rem;
	}
	/*图片*/
	.iconPic {
		height: 100%;
		display: block;/*转换为块级元素  用于控制左右居中显示*/
		margin: 0 auto;
	}
	/*文字*/
	p {
		position: absolute;
		bottom: 0;/*用于控制居中 贴近底部*/
		left: 0;
		right: 0;
		height: .44rem;
		line-height: .44rem;
		text-align: center;
	}
</style>
2